import React from "react"
import styles from '@/assets/css/order_info.module.css'

export default () => {
    const [orderid] = useState(React.params('orderid') ?? 0)

    let [order, SetOrder] = useState<any>({room: {}})
    let [guest, SetGuest] = useState<any>([])

    useEffect(() => {
        GetOrderData()
    }, [orderid])

    // 获取订单信息
    const GetOrderData = async () => {
        let result = await React.request.post('/order/OrderInfo', {
            orderid: orderid,
            busid: React.business.id
        })

        if(result.code == 0)
        {
            React.toast(result.msg, 'fail', 'back')
            return false
        }

        SetOrder(result.data.order)
        SetGuest(result.data.guest)
    }

    // 页面返回
    const Back = () => {
        const action = React.cookies.load('action')

        if(action == 'payment') {
            React.navigate('/order')

            React.cookies.remove('action')
        }else 
        {
            React.navigate(-1)
        }
    }

    // 评论信息
    const CommentView = () => {
        if(order.status != '4' || order.content == '')
        {
            return (<></>)
        }

        return (
            <div className={styles.comment}>
                <div className={styles.content_title}>评价信息:</div>
                <React.UI.Rate style={{marginTop: '10px'}} value={order.rate} readOnly />
                <React.UI.Divider></React.UI.Divider>
                <div className={styles.content}>
                    <React.UI.TextArea value={order.content} readOnly />
                </div>
            </div>
        )
    }

    return (
        <>
            <div className={styles.header}>
                <React.UI.NavBar back="返回" onBack={Back}>订单详情</React.UI.NavBar>
            </div>

            <div className={styles.order_info}>
                {/* 订单信息 */}
                <div className={styles.info_content}>
                    <div className={styles.content_title}>订单信息：</div>
                    <div className={styles.content_item}>
                        <p>入住时间</p>
                        <div>{order.starttime_text} {order.startday_text} - {order.endtime_text}  {order.endday_text}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>入住天数</p>
                        <div>共 {order.order_day} 晚</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>订单价格</p>
                        <div className={styles.content_price}>￥{order.price}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>房间单价</p>
                        <div className={styles.content_price}>￥{order.room.price}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>支付方式</p>
                        <div>{order.type_text}</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>入住人数</p>
                        <div>{guest.length} 人</div>
                    </div>
                    <div className={styles.content_item}>
                        <p>订单备注</p>
                        <div>{order.remark}</div>
                    </div>
                </div>

                {/* 房间信息 */}
                <div className={styles.info_footer}>
                    <div className={styles.content_title}>房屋信息：</div>
                    <div className={styles.detail}>
                        <div className={styles.thumb}>
                            <Link to={`/room/info?roomid=${order.roomid}`}>
                                <img src={order.room.thumb_text} alt="" />
                            </Link>
                        </div>
                        <div className={styles.right}>
                            <div className={styles.money}>
                                <p>{order.room.name}</p>
                                <p>￥{order.room.price}</p>
                            </div>
                            <div className={styles.tips}>
                                {order.room.flag_text && order.room.flag_text.map((flag: any, index: any) => <React.UI.Tag key={index} color='primary' fill='outline' style={{marginLeft: '3px'}}>{flag}</React.UI.Tag>)}
                            </div>
                        </div>
                    </div>
                </div>

                {/* 住客信息 */}
                <div className={styles.info_footer}>
                    <div className={styles.content_title}>住客信息：</div>
                    <div className={styles.detail}>
                        <React.UI.List className={styles.list}>
                            {guest.map((item: any) => (
                                <React.UI.List.Item
                                    key={item.nickname}
                                    description={`手机号码：${item.mobile}`}
                                >
                                    {item.nickname}({item.gender_text})
                                </React.UI.List.Item>
                            ))}
                        </React.UI.List>
                    </div>

                    <CommentView />
                </div>
            </div>
        </>
    )
}